<template>
  <div class="group-order-page">
    <!-- 左侧团列表 -->
    <div class="left-panel">
      <div class="panel-header">
        <h3>团列表</h3>
        <div class="header-actions">
          <el-button 
            type="primary" 
            size="small" 
            icon="el-icon-refresh"
            :loading="loading"
            @click="loadGroupList"
          >
            刷新
          </el-button>
        </div>
      </div>
      <div class="group-list">
        <div 
          v-for="group in groupList" 
          :key="group.id" 
          class="group-card"
          :class="{ active: selectedGroupId === group.travel_sku_stock_id }"
          @click="selectGroup(group)"
        >
          <div class="group-cover">
            <img :src="group.travel.cover" :alt="group.travel.name" />
          </div>
          <div class="group-info">
            <h4 class="travel-name">{{ group.travel.name }} {{ group.travel_date || '' }}</h4>
            <div class="group-stats">
                <div class="stat-item">
                    <span class="label">出行日期：</span>
                    <span class="value">{{ group.travelSkuStock.travel_date || '' }}</span>
                </div>
                <div class="stat-item">
                    <span class="label">成人价格：</span>
                    <span class="value">{{ group.travelSkuStock.adult_price }}元</span>
                </div>
                <div class="stat-item">
                    <span class="label">儿童价格：</span>
                    <span class="value">{{ group.travelSkuStock.child_price }}元</span>
                </div>
                <div class="stat-item">
                  <span class="label">成团/总人数：</span>
                  <span class="value">{{ group.groupPeople }} / {{ group.travelSkuStock.group_adult_people }}人</span>
                </div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- 右侧团订单列表 -->
    <div class="right-panel">
      <div class="panel-header">
        <h3>团订单列表</h3>
        <div class="header-actions">
          <span v-if="selectedGroupId" class="selected-group-info">
            当前选中：{{ selectedGroupName }}
          </span>
        </div>
      </div>
      <div class="order-list-container">
        <TravelOrderIndex 
          v-if="selectedGroupId" 
          :travel_sku_stock_id="selectedGroupId"
          :is_group="1"
          :key="selectedGroupId"
        />
        <div v-else class="no-selection">
          <el-empty description="请先选择一个团" />
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import TravelOrderIndex from './index.vue'
import { http } from "@/api";
export default {
  name: 'GroupOrderPage',
  components: {
    TravelOrderIndex
  },
  data() {
    return {
      groupList: [],
      selectedGroupId: null,
      selectedGroupName: '',
      loading: false
    }
  },
  computed: {
    // 计算属性
  },
  created() {
    this.loadGroupList()
  },
  methods: {
    // 加载团列表
    async loadGroupList() {
      this.loading = true
      try {
        // 这里调用获取团列表的API
        const response = await http.travelOrder.groupList()
        this.groupList = response.data || []
        
        // 如果有团数据，默认选中第一个
        if (this.groupList.length > 0) {
          this.selectGroup(this.groupList[0])
        }
      } catch (error) {
        console.error('加载团列表失败:', error)
        this.$message.error('加载团列表失败')
      } finally {
        this.loading = false
      }
    },

    // 选择团
    selectGroup(group) {
      this.selectedGroupId = group.travel_sku_stock_id
      this.selectedGroupName = group.travel.name
    },

    // 刷新订单列表
    refreshOrderList() {
      if (this.selectedGroupId) {
        // 通过key的变化来强制刷新子组件
        this.$nextTick(() => {
          this.selectedGroupId = this.selectedGroupId
        })
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.group-order-page {
  display: flex;
  height: 100%;
  background: #f5f5f5;
}

.left-panel {
  width: 320px;
  flex-shrink: 0;
  background: white;
  border-right: 1px solid #e8e8e8;
  display: flex;
  flex-direction: column;
  
  .panel-header {
    padding: 20px;
    border-bottom: 1px solid #e8e8e8;
    display: flex;
    justify-content: space-between;
    align-items: center;
    
    h3 {
      margin: 0;
      font-size: 18px;
      font-weight: 600;
      color: #333;
    }
  }
  
  .group-list {
    flex: 1;
    overflow-y: auto;
    padding: 12px;
    
    // 自定义滚动条样式
    &::-webkit-scrollbar {
      width: 6px;
    }
    
    &::-webkit-scrollbar-track {
      background: #f1f1f1;
      border-radius: 3px;
    }
    
    &::-webkit-scrollbar-thumb {
      background: #c1c1c1;
      border-radius: 3px;
      
      &:hover {
        background: #a8a8a8;
      }
    }
    
    .group-card {
      background: white;
      border: 1px solid #e8e8e8;
      border-radius: 8px;
      padding: 10px;
      margin-bottom: 6px;
      cursor: pointer;
      transition: all 0.3s ease;
      display: flex;
      align-items: center;
      gap: 12px;
      
      &:hover {
        border-color: #409eff;
        box-shadow: 0 2px 8px rgba(64, 158, 255, 0.1);
      }
      
      &.active {
        border-color: #409eff;
        background: #f0f9ff;
        box-shadow: 0 2px 8px rgba(64, 158, 255, 0.2);
      }
      
      .group-cover {
        flex-shrink: 0;
        width: 60px;
        height: 60px;
        border-radius: 6px;
        overflow: hidden;
        
        img {
          width: 100%;
          height: 100%;
          object-fit: cover;
        }
      }
      
      .group-info {
        flex: 1;
        min-width: 0;
        
        .travel-name {
          font-size: 14px;
          font-weight: 600;
          color: #333;
          margin: 0;
        }
        
        .group-stats {
          .stat-item {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 4px;
            
            &:last-child {
              margin-bottom: 0;
            }
            
            .label {
              font-size: 12px;
              color: #666;
            }
            
            .value {
              font-size: 12px;
              color: #333;
              font-weight: 500;
            }
          }
        }
      }
    }
  }
}

.right-panel {
  flex: 1;
  background: white;
  display: flex;
  flex-direction: column;
  overflow: auto;
  
  .panel-header {
    padding: 20px;
    border-bottom: 1px solid #e8e8e8;
    display: flex;
    justify-content: space-between;
    align-items: center;
    
    h3 {
      margin: 0;
      font-size: 18px;
      font-weight: 600;
      color: #333;
    }
    
    .selected-group-info {
      font-size: 14px;
      color: #409eff;
      background: #f0f9ff;
      padding: 6px 12px;
      border-radius: 4px;
      border: 1px solid #d1e7ff;
      margin-right: 12px;
    }
  }
  
  .order-list-container {
    flex: 1;
    overflow: hidden;
    position: relative;
    
    .no-selection {
      display: flex;
      align-items: center;
      justify-content: center;
      height: 100%;
      color: #999;
    }
    
    // 为子组件添加滚动条样式
    :deep(.el-table) {
      .el-table__body-wrapper {
        overflow-y: auto;
        max-height: calc(100vh - 200px);
      }
    }
    
    :deep(.el-pagination) {
      margin-top: 20px;
      text-align: center;
    }
  }
}

// 响应式设计
@media (max-width: 1200px) {
  .left-panel {
    width: 350px;
  }
}

@media (max-width: 768px) {
  .group-order-page {
    flex-direction: column;
  }
  
  .left-panel {
    width: 100%;
    height: auto;
    max-height: 300px;
  }
  
  .right-panel {
    flex: 1;
  }
}
</style>
